* {
	margin: 0;
	padding: 0;
	user-select: none;
}

html,
body,
.box {
	height: 100%;
}

body {
	background-image: linear-gradient( 135deg, #FFD26F 10%, #3677FF 100%);
}

.background {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	z-index: -1;
}

.box {
	display: flex;
	flex: 1;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding: 0 10%;
}

ul {
	display: flex;
	width: 100%;
	height: 50%;
	justify-content: space-around;
	align-items: center;
}

li {
	width: 11.25rem;
	height: 11.25rem;
	list-style: none;
	float: left;
}

@media screen and (max-width:1000px) {
	li {
		width: 15vw;
		height: 15vw;
	}
}

li div {
	/* background-image: linear-gradient( 135deg, #A0FE65 10%, #FA016D 100%); */
	background-image: linear-gradient( 135deg, #69FF97 10%, #00E4FF 100%);
	font-size: 1.25rem;
	font-weight: 500;
	font-family: "sans-serif";
	border-radius: 25%;
	transition-property: width,height,opacity;
	transition-duration: 1s;
}

li div:hover {
	/* box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75); */
	animation: light 2s infinite;
	opacity: 0.6;
	cursor: pointer;
	width: 120%;
	height: 120%;
}

li div a {
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: #000000;
	text-align: center;
}

li div,
li a {
	width: 100%;
	height: 100%;
	position: relative;
}

@keyframes light {
	50% {
		box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
	}
}
